<template >
  <div class="container">
    <div class="header">
      我的订单
    </div>
    <van-tabs v-model:active="activeName" @click-tab="onClickTab">
      <van-tab title="全部" name="" />
      <van-tab title="待支付" name="1" />
      <van-tab title="待服务" name="2" />
      <van-tab title="已完成" name="3" />
      <van-tab title="已取消" name="4" />
    </van-tabs>
    <van-row class="van-row" v-for="item in orderMsg" :key="item.out_trade_no" @click="goToOrderDetail(item.out_trade_no)">
      <van-col span="5">
        <van-image
          width="50"
          height="50"
          radis="5"
          src="https://t15.baidu.com/it/u=2533114144,4057268059&fm=224&app=112&f=JPEG?w=500&h=500"
        />
      </van-col>
      <van-col span="14">
        <div class="text1">{{ item.service_name }}</div>
        <div class="text2">
          <div>{{item.hospital_name}}</div>
          <div>预约时间{{item.starttime}}</div>
        </div>
      </van-col>
      <van-col span="5" :style="`color:${colorMap[item.trade_state]}`">
        <div v-show="item.trade_state==='待支付'">
          <counter :second="item.timer"/>
        </div>
        <div>{{ item.trade_state }}</div>
      </van-col>
    </van-row>
    <div class="bottom-text ">没有更多了</div>
  </div>
</template>
<script setup>
import {useRouter} from 'vue-router'
import { ref,reactive,getCurrentInstance, onMounted, computed} from 'vue';
import dayjs from 'dayjs'
import counter from '../../components/counter.vue'

dayjs().format()
//获取当前实例
const {proxy}=getCurrentInstance()
const router=useRouter()
const orderMsg=ref()
const activeName=ref("")
const colorMap={
  "待支付":'#ffa200',
  "待服务":'#1da6fd',
  "已完成":'#21c521',
  "已取消":'#999999'
}

//获取订单数据，state为订单状态
const getOrderList=async(state)=>{
  const {data}=await proxy.$api.orderList({state})
  return data.map((item)=>{
    item.timer=item.order_start_time+7200000-Date.now()
    return item
  })
}
//点击Tab栏
const onClickTab=async(item)=>{
  activeName.value = item.name
  orderMsg.value=await getOrderList(item.name)
}
onMounted(async()=>{
  orderMsg.value=await getOrderList('')
  // console.log(orderMsg.value)
})

//点击订单跳转详情页
const goToOrderDetail=(orderId)=>{
  router.push(`/detail?oid=${orderId}`)
}


</script>
<style lang="less" scoped>
  .container {
    background-color: #f0f0f0;
    height: 100vh;
  }
  .header {
    background-color: #fff;
    line-height: 40px;
    text-align: center;
  }
  .van-row {
    background-color: #fff;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    .text1 {
      font-size: 16px;
      line-height: 25px;
      font-weight: bold;
    }
    .text2 {
      font-size: 14px;
      line-height: 20px;
      color: #999999;
    }
  }
  .bottom-text {
    line-height: 50px;
    text-align: center;
    color: #999999;
  }
</style>